import React, {Fragment} from "react";
import {
    getBulletinBoard, addBulletinBoard, getAdministrativeArea, delBulletinBoard, getSingleBulletinBoard, modBulletinBoard
} from '../../../service/api';
import Trees from '../../../components/Trees/Trees';
import { Table, Button, Form, Input, Modal, Collapse, Row, Col, Cascader, message, Popconfirm, Spin } from 'antd';
const FormItem = Form.Item;
const Panel = Collapse.Panel;
const { TextArea } = Input;

class AddBulletinBoard extends React.Component {

    state = {
        visible: false,
        confirmLoading: false,
        fetching: false,
        area: []
    }

    showModal = () => {
        if(!this.state.area.length){
            let self = this;
            getAdministrativeArea().then(function (data) {
                if(data.code === 200){
                    self.setState({area: data.data})
                }
            })
        }

        this.setState({
            visible: true
        });
    }

    handleOk = () => {
        let self = this;
        this.props.form.validateFields((err, values) => {
            if (!err) {

                values.deptid = values.deptid[values.deptid.length-1];

                self.setState({
                    confirmLoading: true,
                });


                addBulletinBoard(values).then(function (data) {
                    if(data.code === 200){
                        self.setState({
                            visible: false,
                            confirmLoading: false,
                        })
                        self.props.retrieve();

                        message.success("添加成功");
                    }else{
                        message.error(data.msg);
                        self.setState({
                            confirmLoading: false
                        })
                    }
                })

            }
        });

    }

    handleCancel = () => {
        this.props.form.resetFields();
        this.setState({
            visible: false,
            confirmLoading: false
        });
    }

    render() {
        const {visible, confirmLoading} = this.state;
        const {getFieldDecorator} = this.props.form;
        return (
            <Fragment>
                <Button className="fl addNew formAddBtn" type="primary" onClick={this.showModal}>新增</Button>
                <Modal title="新增公示牌信息"
                       visible={visible}
                       maskClosable={false}
                       onOk={this.handleOk}
                       confirmLoading={confirmLoading}
                       onCancel={this.handleCancel}
                       okText="提交"
                       cancelText="取消"
                       width="80%"
                >
                    <Form className="modalForm">
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="地区">
                                    {getFieldDecorator('deptid',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请选择地区" }],
                                    })(
                                        <Cascader options={this.state.area} style={{width: '100%'}} placeholder='请选择地区' changeOnSelect />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="河道名称">
                                    {getFieldDecorator('name',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请填写河道名称" }],
                                    })(
                                        <Input placeholder="河长姓名" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="公示牌编号">
                                    {getFieldDecorator('numberid',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请填写公示牌编号" }],
                                    })(
                                        <Input placeholder="河长姓名" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="公示牌标识">
                                    {getFieldDecorator('sign',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请填写公示牌标识" }],
                                    })(
                                        <Input placeholder="河长姓名" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="管理单位">
                                    {getFieldDecorator('management',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请填写管理单位" }],
                                    })(
                                        <Input placeholder="管理单位" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="河道长度">
                                    {getFieldDecorator('length',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请填写河道长度" }],
                                    })(
                                        <Input placeholder="河道长度" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="河道起点">
                                    {getFieldDecorator('startpoint',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请填写河道起点" }],
                                    })(
                                        <Input placeholder="河道起点" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="河道终点">
                                    {getFieldDecorator('endpoint',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请填写河道终点" }],
                                    })(
                                        <Input placeholder="河道终点" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="河长信息">
                                    {getFieldDecorator('rivermanager',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请填写河长信息" }],
                                    })(
                                        <Input placeholder="河长信息" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="联系方式">
                                    {getFieldDecorator('telephone',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请填写联系方式" }],
                                    })(
                                        <Input placeholder="联系方式" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="河长职责">
                                    {getFieldDecorator('duty',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请填写河长职责" }],
                                    })(
                                        <TextArea placeholder="河长职责" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="整治目标">
                                    {getFieldDecorator('result',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请填写整治目标" }],
                                    })(
                                        <TextArea placeholder="整治目标" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="存在问题">
                                    {getFieldDecorator('problem',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请填写存在问题" }],
                                    })(
                                        <TextArea placeholder="存在问题" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="图片后缀">
                                    {getFieldDecorator('suffix',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请填写图片后缀" }],
                                    })(
                                        <Input placeholder="图片后缀" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="图片名称">
                                    {getFieldDecorator('filename',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请填写图片名称" }],
                                    })(
                                        <Input placeholder="图片名称" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="图片路径">
                                    {getFieldDecorator('src',{
                                        initialValue: "",
                                        rules: [{ required: true, message: "请填写图片路径" }],
                                    })(
                                        <Input placeholder="图片路径" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>

                </Modal>
            </Fragment>
        )
    }

}
const AddBulletinBoardForm = Form.create()(AddBulletinBoard);

class ModBulletinBoard extends React.Component {

    state = {
        visible: false,
        confirmLoading: false,
        fetching: false,
        area: []
    }

    showModal = () => {
        let self = this;
        if(!this.state.area.length){
            let self = this;
            getAdministrativeArea().then(function (data) {
                if(data.code === 200){
                    self.setState({area: data.data})
                }
            })
        }

        self.setState({loading: true, id: this.props.id});
        getSingleBulletinBoard(this.props.id).then(function (data) {
            if(data.code === 200){
                self.setState({data: data.data, loading: false})
            }
        });

        this.setState({
            visible: true
        });
    }

    handleOk = () => {
        let self = this;
        this.props.form.validateFields((err, values) => {
            if (!err) {

                values.deptid = values.deptid[values.deptid.length-1];

                self.setState({
                    confirmLoading: true,
                });

                modBulletinBoard(this.state.id, values).then(function (data) {
                    if(data.code === 200){
                        self.setState({
                            visible: false,
                            confirmLoading: false,
                        })
                        self.props.retrieve();

                        message.success("添加成功");
                    }else{
                        message.error(data.msg);
                        self.setState({
                            confirmLoading: false
                        })
                    }
                })

            }
        });

    }

    handleCancel = () => {
        this.props.form.resetFields();
        this.setState({
            visible: false,
            confirmLoading: false
        });
    }

    render() {
        const {visible, confirmLoading} = this.state;
        const {getFieldDecorator} = this.props.form;
        return (
            <Fragment>
                <Button type="primary" onClick={this.showModal}>修改</Button>
                <Modal title="新增公示牌信息"
                       visible={visible}
                       maskClosable={false}
                       onOk={this.handleOk}
                       confirmLoading={confirmLoading}
                       onCancel={this.handleCancel}
                       okText="提交"
                       cancelText="取消"
                       width="80%"
                >
                    <Spin spinning={this.state.loading}>
                        {this.state.data?<Form className="modalForm">
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="地区">
                                    {getFieldDecorator('deptid',{
                                        initialValue: this.state.data.deptids,
                                        rules: [{ required: true, message: "请选择地区" }],
                                    })(
                                        <Cascader options={this.state.area} style={{width: '100%'}} placeholder='请选择地区' changeOnSelect />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="河道名称">
                                    {getFieldDecorator('name',{
                                        initialValue: this.state.data.name,
                                        rules: [{ required: true, message: "请填写河道名称" }],
                                    })(
                                        <Input placeholder="河长姓名" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="公示牌编号">
                                    {getFieldDecorator('numberid',{
                                        initialValue: this.state.data.numberid,
                                        rules: [{ required: true, message: "请填写公示牌编号" }],
                                    })(
                                        <Input placeholder="河长姓名" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="公示牌标识">
                                    {getFieldDecorator('sign',{
                                        initialValue: this.state.data.sign,
                                        rules: [{ required: true, message: "请填写公示牌标识" }],
                                    })(
                                        <Input placeholder="河长姓名" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="管理单位">
                                    {getFieldDecorator('management',{
                                        initialValue: this.state.data.management,
                                        rules: [{ required: true, message: "请填写管理单位" }],
                                    })(
                                        <Input placeholder="管理单位" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="河道长度">
                                    {getFieldDecorator('length',{
                                        initialValue: this.state.data.length,
                                        rules: [{ required: true, message: "请填写河道长度" }],
                                    })(
                                        <Input placeholder="河道长度" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="河道起点">
                                    {getFieldDecorator('startpoint',{
                                        initialValue: this.state.data.startpoint,
                                        rules: [{ required: true, message: "请填写河道起点" }],
                                    })(
                                        <Input placeholder="河道起点" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="河道终点">
                                    {getFieldDecorator('endpoint',{
                                        initialValue: this.state.data.endpoint,
                                        rules: [{ required: true, message: "请填写河道终点" }],
                                    })(
                                        <Input placeholder="河道终点" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="河长信息">
                                    {getFieldDecorator('rivermanager',{
                                        initialValue: this.state.data.rivermanager,
                                        rules: [{ required: true, message: "请填写河长信息" }],
                                    })(
                                        <Input placeholder="河长信息" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="联系方式">
                                    {getFieldDecorator('telephone',{
                                        initialValue: this.state.data.telephone,
                                        rules: [{ required: true, message: "请填写联系方式" }],
                                    })(
                                        <Input placeholder="联系方式" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="河长职责">
                                    {getFieldDecorator('duty',{
                                        initialValue: this.state.data.duty,
                                        rules: [{ required: true, message: "请填写河长职责" }],
                                    })(
                                        <TextArea placeholder="河长职责" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="整治目标">
                                    {getFieldDecorator('result',{
                                        initialValue: this.state.data.result,
                                        rules: [{ required: true, message: "请填写整治目标" }],
                                    })(
                                        <TextArea placeholder="整治目标" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="存在问题">
                                    {getFieldDecorator('problem',{
                                        initialValue: this.state.data.problem,
                                        rules: [{ required: true, message: "请填写存在问题" }],
                                    })(
                                        <TextArea placeholder="存在问题" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="图片后缀">
                                    {getFieldDecorator('suffix',{
                                        initialValue: this.state.data.suffix,
                                        rules: [{ required: true, message: "请填写图片后缀" }],
                                    })(
                                        <Input placeholder="图片后缀" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="center" align="top">
                            <Col span={12}>
                                <FormItem label="图片名称">
                                    {getFieldDecorator('filename',{
                                        initialValue: this.state.data.filename,
                                        rules: [{ required: true, message: "请填写图片名称" }],
                                    })(
                                        <Input placeholder="图片名称" />
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem label="图片路径">
                                    {getFieldDecorator('src',{
                                        initialValue: this.state.data.src,
                                        rules: [{ required: true, message: "请填写图片路径" }],
                                    })(
                                        <Input placeholder="图片路径" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>:true}
                    </Spin>
                </Modal>
            </Fragment>
        )
    }

}
const ModBulletinBoardForm = Form.create()(ModBulletinBoard);


let columns = [];

const customPanelStyle = {
    background: '#f7f7f7',
    borderRadius: 4,
    marginBottom: 24,
    border: 0,
    overflow: 'hidden',
};

const columns1 = [
    {
        dataIndex: 'id',
        title: 'id',
        width: 80
    },
    {
        dataIndex: 'numberid',
        title: '公示牌编号',
        width: 100
    },
    // {
    //     dataIndex: 'duty',
    //     title: '河长职责',
    //     width: 120
    // },
    {
        dataIndex: 'endpoint',
        title: '河道终点',
        width: 120
    },
    // {
    //     dataIndex: 'filename',
    //     title: '相关图片名称',
    //     width: 120
    // },
    {
        dataIndex: 'length',
        title: '河道长度',
        width: 80
    },
    // {
    //     dataIndex: 'management',
    //     title: '管理单位',
    //     width: 80
    // },
    {
        dataIndex: 'name',
        title: '河道名称',
        width: 100
    },
    // {
    //     dataIndex: 'problem',
    //     title: '存在问题',
    //     width: 100
    // },
    // {
    //     dataIndex: 'result',
    //     title: '整治目标',
    //     width: 100
    // },
    // {
    //     dataIndex: 'rivermanager',
    //     title: '河长信息',
    //     width: 100
    // },
    {
        dataIndex: 'sign',
        title: '公示牌标识',
        width: 100
    },
    {
        dataIndex: 'src',
        title: '路径',
        width: 100
    },
    {
        dataIndex: 'startpoint',
        title: '河道起点',
        width: 100
    },
    // {
    //     dataIndex: 'telephone',
    //     title: '联系方式',
    //     width: 100
    // }

]

class BulletinBoard extends React.Component {

    state = {
        permissions: JSON.parse(localStorage.permissions),
        limit: 20,
        offset: 0,
        numberId: "",
        depId: "",
        data: [],
        loading: true,
        pagination: {pageSize: 20},
        height: document.body.clientHeight - 230,
    }

    componentDidMount() {
        let arr = [
            {
                dataIndex: 'more',
                title: '更多',
                width: 80,
                render: (text,record) => (
                    <span className="getInfo" onClick={() => this.getInfo(record.key)}>查看</span>
                )
            },
            {
                title: '操作',
                width: 150,
                render: (record) => (
                    <div className="tableOperation">
                        {this.state.permissions["sys:bulletinBoard:update"]?<ModBulletinBoardForm retrieve={this.getData}  id={record.id} />:true}

                        {this.state.permissions["sys:bulletinBoard:delete"]?
                            <Popconfirm placement="leftBottom" title={`确定删除:${record.numberid}吗?`} id={record.id.toString()} onConfirm={() => this.del(record.id)} okText="确定" cancelText="取消">
                                <Button type="danger" className="ml10" id={record.id} ghost>删除</Button>
                            </Popconfirm>:true}
                    </div>
                )
            }
        ]
        columns = columns1.concat(arr);
        this.getData();
    }

    componentWillUnmount(){
        columns = columns1;
    }

    getData = () => {
        let self = this;
        const pagination = { ...this.state.pagination };
        self.setState({loading: true});
        getBulletinBoard({
            limit: this.state.limit,
            offset: this.state.offset,
            depId: this.state.depId,
            numberId: this.state.numberId,
        }).then(function (data) {
            pagination.total = data.data.total;
            if(data.code === 200){
                self.setState({data: data.data.rows, showData: data.data.rows, loading: false, pagination})
            }
        })

    }

    getInfo = (key)=> {

        Modal.info({
            title: this.state.data[key].name,
            width: "70%",
            content: (
                <Collapse bordered={false} defaultActiveKey={['1', '2', '3', '4', '5']}>
                    <Panel header="河长职责" key="1" style={customPanelStyle}>
                        <p>{this.state.data[key].duty}</p>
                    </Panel>
                    <Panel header="管理单位" key="2" style={customPanelStyle}>
                        <p>{this.state.data[key].management}</p>
                    </Panel>
                    <Panel header="存在问题" key="3" style={customPanelStyle}>
                        <p>{this.state.data[key].problem}</p>
                    </Panel>
                    <Panel header="整治目标" key="4" style={customPanelStyle}>
                        <p>{this.state.data[key].result}</p>
                    </Panel>
                    <Panel header="河长信息" key="5" style={customPanelStyle}>
                        <p>{this.state.data[key].rivermanager}</p>
                    </Panel>
                    <Panel header="联系方式" key="6" style={customPanelStyle}>
                        <p>{this.state.data[key].telephone}</p>
                    </Panel>

                </Collapse>
            ),

        });
    }

    handleTableChange = (pagination, filters, sorter)=> {
        this.setState({loading: true, offset: (pagination.current-1)*pagination.pageSize},function () {
            this.getData();
        })
    }

    getId = (value)=> {
        this.setState({
            depId: value[0]
        }, () => {
            this.getData();
        })
    }

    del = (id) => {
        let self = this;
        delBulletinBoard(id).then(function (data) {
            if(JSON.parse(data).code === 200){
                self.getData();
                message.success("删除成功");
            }else{
                message.error(data.msg)
            }
        })
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            this.setState({
                numberId : values.numberId
            }, () => {
                this.getData();

            })
        })

    }

    render(){
        const { getFieldDecorator } = this.props.form;
        let data = [];
        for(let i in this.state.data){
            data.push({
                key: i,
                id: this.state.data[i].id,
                numberid: this.state.data[i].numberid,
                duty: this.state.data[i].duty,
                endpoint: this.state.data[i].endpoint,
                filename: this.state.data[i].filename,
                length: this.state.data[i].length,
                management: this.state.data[i].management,
                name: this.state.data[i].name,
                problem: this.state.data[i].problem,
                result: this.state.data[i].result,
                rivermanager: this.state.data[i].rivermanager,
                startpoint: this.state.data[i].startpoint,
                telephone: this.state.data[i].telephone,
            })
        }

        return(
            <div className="clearfix hezhangInfo page">
                <div className="treeArea">
                    <Trees getId={this.getId} />
                </div>
                <div className="mt10 tableArea">
                    <div className="clearfix tableFilter">
                        <Form className="fl searchForm" layout="inline" onSubmit={this.handleSubmit}>

                            <FormItem>
                                {getFieldDecorator('numberId',{
                                    initialValue: ""
                                })(
                                    <Input placeholder="公告牌编号" />
                                )}
                            </FormItem>

                            <FormItem>
                                <Button
                                    type="primary"
                                    htmlType="submit"
                                >
                                    查询
                                </Button>
                            </FormItem>
                        </Form>
                        {this.state.permissions["sys:bulletinBoard:add"]?<AddBulletinBoardForm retrieve={this.getData} town={this.state.town} close={this.turnModalDown} />:true}
                    </div>

                    <Table className="mt10 scrollTable" columns={columns} dataSource={data} loading={this.state.loading} pagination={this.state.pagination} onChange={this.handleTableChange} scroll={{y: this.state.height }} bordered />
                </div>
            </div>
        )
    }

}
const BulletinBoardForm = Form.create()(BulletinBoard);
export default BulletinBoardForm;